<template>
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff;':''">
			<view class="status_bar">

			</view>
			<!-- <view class="nav_bar flex align-center justify-between">
			</view> -->
		</view>
		<view class="" style="height: 24rpx;">

		</view>
		<view class="top1 mx-auto" :class="model=='light'?'top1Light':''">
			<view class="f0">
				<image style="width: 690rpx;height: 336rpx;" :src="'/static/images/property/1_'+model+'.png'" mode="">
				</image>
			</view>
			<view class="top11 A-Medium">
				{{i18n.l017}}1
			</view>
			<view @click="clickBtn(-1)" class="top12 D-Bold flex align-end">
				<view class="text1">
					{{
						moneyType=='USDT'?USDTMoney.z:
						moneyType=='BTC'?BTCMoney.z:
						moneyType=='ETH'?ETHMoney.z:''
					}}
				</view>
				<view class="ml-1 mb-1 flex align-center">
					<view class="text2">
						{{moneyType}}
					</view>
					<image style="width: 18rpx;height: 12rpx;margin-left: 14rpx;"
						:src="'/static/images/downArrow_'+model+'.png'" mode="">
					</image>
				</view>
			</view>
			<view class="top13 pl-5 pl-3 flex align-center justify-between A-Medium">
				<view class="flex align-center">
					<view class="text1">
						{{i18n.l018}}
					</view>
					<view class="text2 mx-2"> 
						${{
						moneyType=='USDT'?USDTMoney.s:
						moneyType=='BTC'?BTCMoney.s:
						moneyType=='ETH'?ETHMoney.s:''
					}}
					</view>
					<view class="text2">
						{{
						moneyType=='USDT'?USDTMoney.b:
						moneyType=='BTC'?BTCMoney.b:
						moneyType=='ETH'?ETHMoney.b:''
					}}%
					</view>
				</view>
				<view @click="$tool.navTo('/pages/zichangfenxi/zichangfenxi')" class="flex align-center">
					<view class="f0">
						<image style="width: 36rpx;height: 36rpx;" :src="'/static/images/property/2_'+model+'.png'"
							mode=""></image>
					</view>
					<view class="text3">
						{{i18n.l019}}
					</view>
					<view class="f0 mr-3">
						<image style="width: 28rpx;height: 28rpx;" :src="'/static/images/property/3_'+model+'.png'"
							mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="top2 mt-3 mx-auto flex align-center A-Medium" :class="model=='light'?'top2Light':''">
			<view @click="clickBtn(1)" class="flex-1 flex flex-column align-center">
				<view class="f0">
					<image style="width: 80rpx;height: 80rpx;" :src="'/static/images/property/4_'+model+'.png'" mode="">
					</image>
				</view>
				<view class="text1">
					{{i18n.l020}}
				</view>
			</view>
			<view @click="clickBtn(3)" class="flex-1 flex flex-column align-center">
				<view class="f0">
					<image style="width: 80rpx;height: 80rpx;" :src="'/static/images/property/5_'+model+'.png'" mode="">
					</image>
				</view>
				<view class="text1">
					{{i18n.l021}}
				</view>
			</view>
			<view @click="clickBtn(2)" class="flex-1 flex flex-column align-center">
				<view class="f0">
					<image style="width: 80rpx;height: 80rpx;" :src="'/static/images/property/6_'+model+'.png'" mode="">
					</image>
				</view>
				<view class="text1">
					{{i18n.l022}}
				</view>
			</view>
			<view @click="$tool.navTo('/pages/property/zhangdan')" class="flex-1 flex flex-column align-center">
				<view class="f0">
					<image style="width: 80rpx;height: 80rpx;" :src="'/static/images/property/7_'+model+'.png'" mode="">
					</image>
				</view>
				<view class="text1">
					{{i18n.l023}}
				</view>
			</view>
		</view>
		<view class="top4 flex align-center pb-3" style="padding-top: 34rpx;" :class="model=='light'?'top4Light':''">
			<view v-for="(item,index) in list" @click="goUrl(item)" class="flex-1 flex align-center justify-center">
				<view class="f0">
					<!-- <image style="width: 32rpx;height: 32rpx;" :src="'/static/images/property/8_'+model+'.png'" mode="">
					</image> -->
					<image style="width: 52rpx;height: 52rpx;" :src="$tool.changeImg(item.linkIcon)" mode="">
					</image>
				</view>
				<view class="text1">
					{{item.linkName}}
				</view>
			</view>
			<!-- <view class="flex-1 flex align-center justify-center">
				<view class="f0">
					<image style="width: 32rpx;height: 32rpx;" :src="'/static/images/property/9_'+model+'.png'" mode="">
					</image>
				</view>
				<view class="text1">
					okk登录
				</view>
			</view>
			<view class="flex-1 py-4 flex align-center justify-center">
				<view class="f0">
					<image style="width: 32rpx;height: 32rpx;" :src="'/static/images/property/10_'+model+'.png'"
						mode=""></image>
				</view>
				<view class="text1">
					链上查询
				</view>
			</view> -->
		</view>
		<view class="mx-3 A-Medium flex align-center justify-between">
			<view @click="$tool.navTo('/pages/mine/jjrtdjyls')" class="top5" :class="model=='light'?'top5Light':''">
				<view class="flex align-center justify-between" style="padding: 24rpx;">
					<view class="text1">
						{{i18n.l024}}(USD)
					</view>
					<view class="f0">
						<image style="width: 28rpx;height: 28rpx;" :src="'/static/images/property/17_'+model+'.png'"
							mode=""></image>
					</view>
				</view>
				<view class="bar1">

				</view>
				<view class="flex align-center">
					<view class="flex-1 flex align-center flex-column justify-evenly">
						<view class="text2">
							{{i18n.l025}}
						</view>
						<view class="text3" style="margin-top: 8rpx;">
							{{inviteCount3}}
						</view>
					</view>
					<view class="bar3">

					</view>
					<view class="flex-1 flex align-center flex-column justify-evenly">
						<view class="text2">
							{{i18n.l026}}
						</view>
						<view class="text3" style="margin-top: 8rpx;">
							{{inviteCount4}}
						</view>
					</view>
				</view>
			</view>
			<view @click="$tool.navTo('/pages/invitationRewards/invitationRewards')" class="top5" :class="model=='light'?'top5Light':''">
				<view class="flex align-center justify-between" style="padding: 24rpx;">
					<view class="text1">
						{{i18n.l027}}(USD)
					</view>
					<view class="f0">
						<image style="width: 28rpx;height: 28rpx;" :src="'/static/images/property/17_'+model+'.png'"
							mode=""></image>
					</view>
				</view>
				<view class="bar2">

				</view>
				<view class="flex align-center">
					<view class="flex-1 flex align-center flex-column justify-evenly">
						<view class="text2">
							{{i18n.l028}}
						</view>
						<view class="text3" style="margin-top: 8rpx;">
							{{inviteCount1}}
						</view>
					</view>
					<view class="bar3">

					</view>
					<view class="flex-1 flex align-center flex-column justify-evenly">
						<view class="text2">
							{{i18n.l029}}
						</view>
						<view class="text3" style="margin-top: 8rpx;">
							{{inviteCount2}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bigTitle ml-3 mt-3 mb-2 A-Medium" :class="model=='light'?'bigTitleLight':''">
			{{i18n.l030}}
		</view>
		<view class="mx-3 box A-Medium flex align-center justify-between" :class="model=='light'?'boxLight2':''">
			<view @click="goPage('USDT')" class="box1">
				<view class="f0 mb-1">
					<image style="height: 40rpx;" :src="'/static/images/property/11_'+model+'.png'" mode="heightFix">
					</image>
				</view>
				<view class="text1" style="margin-bottom: 4rpx;">
					{{i18n.l030}}
				</view>
				<view class="text1">
					{{i18n4.l008}} <text class="text2">{{USDTtotalAmountSum}}</text>
				</view>
			</view>
			<view @click="goPage('BTC')" class="box2">
				<view class="f0 mb-1">
					<image style="height: 40rpx;" :src="'/static/images/property/12_'+model+'.png'" mode="heightFix">
					</image>
				</view>
				<view class="text1" style="margin-bottom: 4rpx;">
					{{i18n.l030}}
				</view>
				<view class="text1">
					{{i18n4.l008}} <text class="text2">{{BTCtotalAmountSum}}</text>
				</view>
			</view>
			<view @click="goPage('ETH')" class="box3">
				<view class="f0 mb-1">
					<image style="height: 40rpx;" :src="'/static/images/property/13_'+model+'.png'" mode="heightFix">
					</image>
				</view>
				<view class="text1" style="margin-bottom: 4rpx;">
					{{i18n.l030}}
				</view>
				<view class="text1">
					{{i18n4.l008}} <text class="text2">{{ETHtotalAmountSum}}</text>
				</view>
			</view>
		</view>
		<view class="bigTitle ml-3 mt-3 A-Medium" :class="model=='light'?'bigTitleLight':''">
			{{i18n.l032}}
		</view>
		<view @click="$tool.navTo('/pages/property/jiaoyijilu?coinType=USDT')" class="bot flex align-center m-3 A-Medium" style="padding: 24rpx 0;" :class="model=='light'?'botLight':''">
			<view class="f0 ml-3 mr-2">
				<image style="width: 72rpx;height: 72rpx;" :src="'/static/images/property/14_'+model+'.png'" mode="">
				</image>
			</view>
			<view class="" style="width: 96rpx;">
				<view class="text1 A-Regular">
					{{i18n.l033}}
				</view>
				<view class="text3">
					USD
				</view>
			</view>
			<view class="" style="width: 158rpx;">
				<view class="text1 A-Regular">
					{{i18n.l034}}USD
				</view>
				<view class="text2">
					{{USDTMoney.a}}
				</view>
			</view>
			<view class="" style="width: 158rpx;">
				<view class="text1 A-Regular">
					{{i18n.l035}}USD
				</view>
				<view class="text2">
					{{USDTMoney.o}}
				</view>
			</view>
			<view class="flex-1" style="">
				<view class="text1 A-Regular">
					{{i18n.l036}}USD
				</view>
				<view class="text2">
					{{USDTMoney.t}}
				</view>
			</view>
		</view>
		<view @click="$tool.navTo('/pages/property/jiaoyijilu?coinType=BTC')" class="bot flex align-center m-3 A-Medium" style="padding: 24rpx 0;" :class="model=='light'?'botLight':''">
			<view class="f0 ml-3 mr-2">
				<image style="width: 72rpx;height: 72rpx;" :src="'/static/images/property/15_'+model+'.png'" mode="">
				</image>
			</view>
			<view class="" style="width: 96rpx;">
				<view class="text1 A-Regular">
					{{i18n.l033}}
				</view>
				<view class="text3">
					BTC
				</view>
			</view>
			<view class="" style="width: 158rpx;">
				<view class="text1 A-Regular">
					{{i18n.l034}}BTC
				</view>
				<view class="text2">
					{{BTCMoney.a}}
				</view>
			</view>
			<view class="" style="width: 158rpx;">
				<view class="text1 A-Regular">
					{{i18n.l035}}BTC
				</view>
				<view class="text2">
					{{BTCMoney.o}}
				</view>
			</view>
			<view class="flex-1" style="">
				<view class="text1 A-Regular">
					{{i18n.l036}}BTC
				</view>
				<view class="text2">
					{{BTCMoney.t}}
				</view>
			</view>
		</view>
		<view @click="$tool.navTo('/pages/property/jiaoyijilu?coinType=ETH')" class="bot flex align-center m-3 A-Medium" style="padding: 24rpx 0;" :class="model=='light'?'botLight':''">
			<view class="f0 ml-3 mr-2">
				<image style="width: 72rpx;height: 72rpx;" :src="'/static/images/property/16_'+model+'.png'" mode="">
				</image>
			</view>
			<view class="" style="width: 96rpx;">
				<view class="text1 A-Regular">
					{{i18n.l033}}
				</view>
				<view class="text3">
					ETH
				</view>
			</view>
			<view class="" style="width: 158rpx;">
				<view class="text1 A-Regular">
					{{i18n.l034}}ETH
				</view>
				<view class="text2">
					{{ETHMoney.a}}
				</view>
			</view>
			<view class="" style="width: 158rpx;">
				<view class="text1 A-Regular">
					{{i18n.l035}}ETH
				</view>
				<view class="text2">
					{{ETHMoney.o}}
				</view>
			</view>
			<view class="flex-1" style="">
				<view class="text1 A-Regular">
					{{i18n.l036}}ETH
				</view>
				<view class="text2">
					{{ETHMoney.t}}
				</view>
			</view>
		</view>
		<czPoup ref="czPoups" :type="btnType" @confirm="czConfirm"></czPoup>
	</view>
</template>

<script>
	import {
		totalInviteReward,
		totalAmount2
	} from '@/core/api/user.js';
	import {
		totalAmount,
		externalLinkList
	} from '@/core/api/index.js';
	import czPoup from '@/components/czPoup.vue';
	export default {
		components:{
			czPoup
		},
		data() {
			return {
				moneyType:'USDT',
				btnType:1,//1充值 2转账 3提现
				// 储蓄池总额
				BTCtotalAmountSum:0,
				ETHtotalAmountSum:0,
				USDTtotalAmountSum:0,
				inviteCount1:0,
				inviteCount2:0,
				inviteCount3:0,
				inviteCount4:0,
				list:[],
			}
		},
		onReady() {

		},
		onLoad() {
			externalLinkList().then(res=>{
				for(let i=0;i<res.result.records.length;i++){
					if(i<3){
						this.list.push(res.result.records[i])
					}else{
						
					}
				}
			})
			totalAmount({
				mobileUserId: uni.getStorageSync('mobileUserId'),
			}).then(res => {
				for(let i=0;i<res.result.length;i++){
					this[res.result[i].coinType+'totalAmountSum'] = res.result[i].totalAmountSum;
				}
			})
			totalAmount2({
				mobileUserId: uni.getStorageSync('mobileUserId'),
			}).then(res => {
				this.inviteCount3 = res.result.indayAmount?res.result.indayAmount:0;
				this.inviteCount4 = res.result.totalAmount?res.result.totalAmount:0;
			})
			totalInviteReward({
				mobileUserId:uni.getStorageSync('mobileUserId'),
			}).then(res=>{
				this.inviteCount1 = res.result.intradayInviteReward?res.result.intradayInviteReward:0;
				this.inviteCount2 = res.result.totalInviteReward?res.result.totalInviteReward:0;
			})
			// 用户余额
			this.$store.dispatch('config/getAassetList');
		},
		onShow() {
			// 用户余额
			this.$store.dispatch('config/getAassetList');
		},
		computed: {
			i18n() {
				return this.$t('last');
			},
			i18n4() {
				return this.$t('last3');
			},
			model() {
				return this.$store.state.config.model;
			},
			USDTMoney(){
				return this.$store.state.config.USDTMoney
			},
			BTCMoney(){
				return this.$store.state.config.BTCMoney
			},
			ETHMoney(){
				return this.$store.state.config.ETHMoney
			},
		},
		methods: {
			goUrl(item){
				plus.runtime.openURL(item.linkAddress);
			},
			goPage(e) {
				uni.setStorageSync('lType', e);
				this.$tool.navTo('/pages/trade/trade2')
			},
			clickBtn(e){
				this.btnType = e;
				this.$refs.czPoups.open();
				// if(e==1){
				// 	// 充值
				// 	this.$tool.navTo('/pages/property/chongzhi');
				// } else if(e==2){
				// 	// 转账
				// 	this.$tool.navTo('/pages/property/huazhuan')
				// } else if(e==3){
				// 	// 提现
				// 	this.$tool.navTo('/pages/property/tixian')
				// }
			},
			// 充值弹窗
			czConfirm(item){
				if(this.btnType==1){
					// 充值
					uni.setStorageSync('czType',item.value);
					this.$tool.navTo('/pages/property/chongzhi?type='+item.id);
				} else if(this.btnType==2){
					// 转账
					uni.setStorageSync('hzType',item.value);
					this.$tool.navTo('/pages/property/huazhuan?type='+item.id)
				} else if(this.btnType==3){
					// 提现
					uni.setStorageSync('txType',item.value);
					this.$tool.navTo('/pages/property/tixian?type='+item.id)
				} else if(this.btnType==-1){
					// 切换
					this.moneyType = item.value;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.bot {
		width: 690rpx;
		min-height: 120rpx;
		background: #16181C;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		border: 2rpx solid #1F2128;

		view {
			flex-shrink: 0;
		}

		.text1 {
			font-size: 24rpx;
			color: #7F838D;
		}

		.text2 {
			font-size: 24rpx;
			color: #AAACB8;
		}
		.text3 {
			font-size: 24rpx;
			color: #F7F7F7;
		}
	}
	.botLight {
		width: 690rpx;
		min-height: 120rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		border: 2rpx solid #fff;
	
		view {
			flex-shrink: 0;
		}
	
		.text1 {
			font-size: 24rpx;
			color: #7F838D;
		}
	
		.text2 {
			font-size: 24rpx;
			color: #0E0F11;
		}
		.text3 {
			font-size: 24rpx;
			color: #5951BA;
		}
	}
	.box {
		font-size: 24rpx;
		color: #D8DAFF;

		.box1 {
			width: 210rpx;
			min-height: 170rpx;
			background: linear-gradient( 225deg, rgba(114,224,51,0.4) 0%, rgba(114,224,51,0.2) 100%);
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			padding: 24rpx;
			.text1 {
				font-size: 24rpx;
				color: #B5B7BF;
			}
			.text2 {
				font-size: 24rpx;
				color: #FFF;
			}
		}

		.box2 {
			width: 210rpx;
			min-height: 170rpx;
			background: linear-gradient( 225deg, rgba(235,172,0,0.4) 0%, rgba(235,172,0,0.2) 100%);
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			padding: 24rpx;
			.text1 {
				font-size: 24rpx;
				color: #B5B7BF;
			}
			.text2 {
				font-size: 24rpx;
				color: #FFF;
			}
		}

		.box3 {
			width: 210rpx;
			min-height: 170rpx;
			background: linear-gradient( 225deg, rgba(96,111,243,0.4) 0%, rgba(96,111,243,0.2) 100%);
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			padding: 24rpx;
			.text1 {
				font-size: 24rpx;
				color: #B5B7BF;
			}
			.text2 {
				font-size: 24rpx;
				color: #FFF;
			}
		}
	}
	.boxLight2 {
		font-size: 24rpx;
		color: #F7F7F7;
	
		.box1 {
			width: 210rpx;
			min-height: 170rpx;
			background: #FFF;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			padding:24rpx;
			.text1 {
				font-size: 24rpx;
				color: #7F838D;
			}
			.text2 {
				font-size: 24rpx;
				color: #0E0F11;
			}
		}
	
		.box2 {
			width: 210rpx;
			min-height: 170rpx;
			background: #FFF;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			padding: 24rpx;
			.text1 {
				font-size: 24rpx;
				color: #7F838D;
			}
			.text2 {
				font-size: 24rpx;
				color: #0E0F11;
			}
		}
	
		.box3 {
			width: 210rpx;
			min-height: 170rpx;
			background: #FFF;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			padding: 24rpx;
			.text1 {
				font-size: 24rpx;
				color: #7F838D;
			}
			.text2 {
				font-size: 24rpx;
				color: #0E0F11;
			}
		}
	}

	.bigTitle {
		font-size: 32rpx;
		color: #F7F7F7;
	}
	.bigTitleLight {
		color: #0E0F11;
	}
	.top5 {
		width: 330rpx;
		min-height: 202rpx;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		border: 2rpx solid #1F2128;
		overflow: hidden;

		.text1 {
			font-size: 26rpx;
			color: #AAACB8;
		}

		.text2 {
			font-size: 24rpx;
			color: #AAACB8;
		}

		.text3 {
			font-size: 24rpx;
			color: #D22540;
		}

		.bar1 {
			height: 2rpx;
			background: #82DA4C;
		}

		.bar2 {
			height: 2rpx;
			background: #6961C0;
		}

		.bar3 {
			width: 2rpx;
			background: #1F2128;
			height: 116rpx;
		}

	}
	.top5Light{
		width: 330rpx;
		min-height: 202rpx;
		background: #FFFFFF;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		border: 2rpx solid #FFFFFF;
		overflow: hidden;
	
		.text1 {
			font-size: 26rpx;
			color: #0E0F11;
		}
	
		.text2 {
			font-size: 24rpx;
			color: #47474A;
		}
	
		.text3 {
			font-size: 24rpx;
			color: #D22540;
		}
	
		.bar1 {
			height: 2rpx;
			background: #F4F4F4;
		}
	
		.bar2 {
			height: 2rpx;
			background: #F4F4F4;
		}
	
		.bar3 {
			width: 2rpx;
			background: #F4F4F4;
			height: 116rpx;
		}
	
	}

	.top4 {
		view {
			flex-shrink: 0;
		}

		.text1 {
			font-size: 26rpx;
			color: #AAACB8;
			line-height: 30rpx;
			text-decoration-line: underline;
		}
	}
	.top4Light {
		.text1 {
			font-size: 26rpx;
			color: #47474A;
			line-height: 30rpx;
			text-decoration-line: underline;
		}
	}

	.top2 {
		width: 690rpx;
		height: 224rpx;
		background: #10151F;
		border-radius: 36rpx;

		view {
			flex-shrink: 0;
		}

		.text1 {
			font-size: 26rpx;
			color: #F7F7F7;
			margin-top: 12rpx;
		}
	}
	.top2Light {
		width: 690rpx;
		height: 224rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
	
		view {
			flex-shrink: 0;
		}
	
		.text1 {
			font-size: 26rpx;
			color: #F7F7F7;
			color: #0E0F11;
		}
	}

	.top1 {
		width: 690rpx;
		height: 336rpx;
		background: #16181C;
		border-radius: 68rpx;
		border: 2rpx solid #1F2128;
		position: relative;

		.top11 {
			left: 50rpx;
			top: 60rpx;
			font-size: 32rpx;
			color: #F7F7F7;
			position: absolute;
		}

		.top12 {
			font-weight: bold;
			top: 118rpx;
			left: 50rpx;
			color: #f7f7f7;
			position: absolute;

			.text1 {
				font-size: 68rpx;
			}

			.text2 {
				font-size: 40rpx;
			}

		}

		.top13 {
			width: 100%;
			position: absolute;
			// left: 50rpx;
			top: 236rpx;

			.text1 {
				font-size: 28rpx;
				color: #AAACB8;
			}

			.text2 {
				font-size: 28rpx;
				color: #FFFFFF;
			}
			.text3 {
				ont-size: 28rpx;
				color: #82DA4C;
			}
			.text4 {
				ont-size: 28rpx;
				color: #D22540;
			}
		}
	}

	.top1Light {}
</style>